<#include "/include/macros.ftl">
<@header></@header>
<@breadcrumb>
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active">友情链接管理</li>
    </ol>
</@breadcrumb>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.ico" type="image/ico" />

    <title>发布软装产品</title>

    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../assets/css/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../assets/css/green.css" rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link href="../assets/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link href="../assets/css/jqvmap.min.css" rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link href="../assets/css/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../assets/css/custom.min.css" rel="stylesheet">
    <style>
        .addImg{
            height:100px;
            width: 200px;
            border:1px solid #ced4da;
            box-sizing: content-box;
            position: relative;
        }
        .addImg img{
            height:100px;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .addImg>input{
            height:100px;
            width: 200px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
        .center_center{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .addPuctor{
            background-image: url('../assets/img/addpuct.png');
            height: 21px;
            width: 22px;
            background-position: 0 0;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .pagination a {
            text-decoration: none;
            border: 1px solid #AAE;
            color: #15B;
        }

        .pagination a, .pagination span {
            display: inline-block;
            padding: 0.1em 0.4em;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        .pagination .current {
            background: #26B;
            color: #fff;
            border: 1px solid #AAE;
        }

        .pagination .current.prev, .pagination .current.next{
            color:#999;
            border-color:#999;
            background:#fff;
        }

        .cheeek{
            height: 20px;
            width: 20px;
        }
        .product{
            min-height:60px ;
            align-items: center;
        }
        .product>img{
            height: 100px;
            width: 100px;
            object-fit: cover;
        }
        .product>div{
            flex-flow: column;
            justify-content: space-between;
            height: 100px;
            margin-left: 20px;
            width: 375px;
            margin-right: 20px;
        }
        .editor-wrapper{
            padding: 10px;

        }
        .editor-wrapper>div{
            margin-top: 5px;
        }
        .editor-wrapper img{
            width: 100%;
        }
    </style>
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">

        <!-- /top navigation -->

        <!-- page content 中间的内容-->
        <div class="right_col" role="main">
            <div class="x_content">
                <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">标题 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 ">
                        <input type="text" id="first-name" required="required" class="form-control title">
                    </div>
                </div>
                <div class="form-group item">
                    <label class="col-form-label col-md-3 col-sm-3 label-align">场所 <span class="required">*</label>
                    <div class="col-md-6 col-sm-6 " >
                        <select class="form-control" id='place'>
                            <option selected disabled></option>
                        </select>
                    </div>
                </div>
                <div class="form-group item">
                    <label class="col-form-label col-md-3 col-sm-3 label-align">风格 <span class="required">*</label>
                    <div class="col-md-6 col-sm-6 " >
                        <select class="form-control" id='style'>
                            <option selected disabled></option>
                        </select>
                    </div>
                </div>
                <div class="form-group item">
                    <label class="col-form-label col-md-3 col-sm-3 label-align">产品来源 <span class="required">*</label>
                    <div class="col-md-2 col-sm-2 " >
                        <select class="form-control " id='province'>
                            <option selected disabled>省</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-2 " >
                        <select class="form-control" id='city' >
                            <option selected disabled>市</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-2 " >
                        <select class="form-control" id='area'>
                            <option selected disabled>区</option>
                        </select>
                    </div>
                </div>
                <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">封面图片 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 " style="display: flex;align-items: center;">
                        <div class="addImg">
                            <input type="file" />
                        </div>
                        <span>（封面最佳尺寸：100*200px）</span>
                    </div>
                </div>
                <!-- 富文本 -->
                <div class="form-group item">
                    <label class="col-form-label col-md-3 col-sm-3 label-align">内容描述 <span class="required">*</label>
                    <div class="col-md-6 col-sm-6 fuwenben">
                        <div class="id id1">
                            <div id="alerts"></div>
                            <div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor1">
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                    </ul>
                                </div>

                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a data-edit="fontSize 5">
                                                <p style="font-size:17px">Huge</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a data-edit="fontSize 3">
                                                <p style="font-size:14px">Normal</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a data-edit="fontSize 1">
                                                <p style="font-size:11px">Small</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
                                    <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
                                    <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
                                    <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
                                    <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
                                    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a>
                                    <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
                                    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
                                    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
                                    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
                                    <div class="dropdown-menu input-append">
                                        <input class="span2" placeholder="URL" type="text" data-edit="createLink" />
                                        <button class="btn" type="button">Add</button>
                                    </div>
                                    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
                                </div>

                                <div class="btn-group" data-toggle="modal" data-target=".bs-example-modal-lg">
                                    <a class="btn" data-edit="fgfg" title="添加商品"><i class="fa  addPuctor"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
                                    <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
                                    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
                                </div>

                            </div>

                            <div id="editor1" class="editor-wrapper"></div>

                            <textarea name="descr" id="descr" style="display:none;"></textarea>
                            <br />
                        </div>

                        <button class="btn btn-secondary addContent" style="display: block;">继续添加内容</button>
                    </div>

                </div>
                <!-- 富文本 -->
                <div class="item form-group center_center">
                    <!-- <button  class="btn btn-primary btn-lg">预览</button> -->
                    <button  class="btn btn-success btn-lg submited" style="min-width: 200px;">保存</button>
                </div>
            </div>
        </div>
        <!-- 选择商品的弹框 -->
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="item form-group">
                            <div class="col-md-3 col-sm-3 ">
                                查找商品
                            </div>
                        </div>
                        <div class="item form-group">
                            <div class="col-md-4 col-sm-4 ">
                                <select class="form-control productType">
                                    <option >选择商品分类</option>
                                    <option>平房</option>
                                    <option>KTV</option>
                                    <option>工作室</option>
                                    <option>别墅</option>
                                </select>
                            </div>
                            <div class="col-md-4 col-sm-4 ">
                                <input type="text"  required="required" class="form-control productName" placeholder="商品名称/商品货号">
                            </div>
                            <div class="col-md-3 col-sm-3 ">
                                <button  class="btn btn-primary searchProduct">搜索</button>
                            </div>
                        </div>


                        <div id="Searchresult" style="min-height: 321px;"></div>
                        <div id="hiddenresult" style="display:none;">
                            <!-- 列表元素 -->
                        </div>
                        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                        <div class="item form-group center_center">
                            <button class="btn btn-secondary " data-dismiss="modal" aria-label="Close" aria-hidden="true">取消</button>
                            <button class="btn btn-success choosePuctSure" style="margin-left: 20px;" data-dismiss="modal" aria-label="Close" aria-hidden="true">确定</button>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <!-- 选择商品的弹框 -->
        <!-- /page content 中间的内容-->

        <!-- footer content -->
        <footer>
            <div class="pull-right">
                Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
            </div>
            <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->


    </div>
</div>
<!-- jQuery -->
<script src="../assets/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
<script src="../assets/js/fastclick.js"></script>
<!-- NProgress -->
<script src="../assets/js/nprogress.js"></script>
<!-- Chart.js -->
<script src="../assets/js/Chart.min.js"></script>
<!-- gauge.js -->
<script src="../assets/js/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="../assets/js/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="../assets/js/icheck.min.js"></script>
<!-- jQuery Tags Input -->
<script src="../assets/js/jquery.tagsinput.js"></script>
<!-- bootstrap-wysiwyg -->
<script src="../assets/js/bootstrap-wysiwyg.js"></script>
<script src="../assets/js/jquery.hotkeys.js"></script>
<script src="../assets/js/prettify.js"></script>
<!-- Skycons -->
<script src="../assets/js/skycons.js"></script>
<!-- Flot -->
<script src="../assets/js/jquery.flot.js"></script>
<script src="../assets/js/jquery.flot.pie.js"></script>
<script src="../assets/js/jquery.flot.time.js"></script>
<script src="../assets/js/jquery.flot.stack.js"></script>
<script src="../assets/js/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="../assets/js/jquery.flot.orderBars.js"></script>
<script src="../assets/js/jquery.flot.spline.min.js"></script>
<script src="../assets/js/curvedLines.js"></script>
<!-- DateJS -->
<script src="../assets/js/date.js"></script>
<!-- JQVMap -->
<script src="../assets/js/jquery.vmap.js"></script>
<script src="../assets/js/jquery.vmap.world.js"></script>
<script src="../assets/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../assets/js/moment.min.js"></script>
<script src="../assets/js/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="../assets/js/custom.min.js"></script>
<!-- Dropzone.js -->
<script src="../assets/js/dropzone.min.js"></script>
<!-- 分页 -->
<script src="../assets/js/pagination.js"></script>
<!-- 地址 -->
<script src="../assets/js/address.js"></script>
<script>
    var contentId,productList=[],chooseListAll=[[]],placelist=[],styleList=[]
    $(document).ready(function(){

        //获取场所
        let formData = new FormData()
        formData.append('state',2)
        $.ajax({
            url: 'http://47.112.101.159:8443/rotationChart/kind',
            type: "post",
            data: formData,
            processData: false,
            contentType: false,
            success: function(res){
                if(res.code == 0){
                    placelist=res.data
                    placelist.splice(0,1)
                    for(let a=0;a<placelist.length;a++){
                        let option=document.createElement("option")
                        option.innerText=placelist[a].content
                        option.value=a
                        $("#place").append(option)
                    }
                }
            }
        })
        //获取风格
        let formData1 = new FormData()
        formData1.append('state',0)
        $.ajax({
            url: 'http://47.112.101.159:8443/rotationChart/kind',
            type: "post",
            data: formData1,
            processData: false,
            contentType: false,
            success: function(res){
                if(res.code == 0){
                    styleList=res.data
                    styleList.splice(0,1)
                    for(let a=0;a<styleList.length;a++){
                        let option=document.createElement("option")
                        option.innerText=styleList[a].content
                        option.value=a
                        $("#style").append(option)
                    }
                }
            }
        })
        //获取省
        for(let a=0;a<addressList.length;a++){
            let option=document.createElement("option")
            option.value=a
            option.innerText=addressList[a].name
            $("#province").append(option)
        }
        //上传封面图片
        $(".addImg>input").on('change', function(){
            var _this = $(this)
            var formData = new FormData()
            formData.append('file',this.files[0])
            formData.append("userId", 1)
            $.ajax({
                url: "http://classic.wljiam.com/caapi/card/insertreminder",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: (res) =>{
                    if($(this).parent()[0].children.length>1){
                        $(this).parent()[0].children[1].src=res.data
                    }else{
                        let img=new Image()
                        img.src=res.data
                        $(this).parent().append(img)
                    }
                }
            })
        })
        //选择商品点击确定
        $(".choosePuctSure").click(function(){
            let list=$("#hiddenresult input[type='checkbox']")
            let chooseList=[]
            for(let a=0;a<list.length;a++){
                if(list[a].checked){
                    chooseList.push(productList[a])
                }
            }
            for(let a=0;a<chooseList.length;a++){
                chooseListAll[Number(contentId)-1].push(chooseList[a])
                let div=document.createElement("div")
                div.className='form-group item product'
                div.innerHTML='<img src="img/cropper.jpg" alt=""><div class="item"><span>'+chooseList[a].index+'植护竹浆本色抽纸3层100抽6包面纸餐巾卫生纸巾批发家用实惠装</span><span style="color: #C84739;font-weight: bold;">¥8.00</span></div><button  class="btn btn-danger deleProducts" data-contentid="'+contentId+'" data-index="'+a+'">删除</button>'
                $('.id'+contentId).append(div)
                $(".deleProducts").unbind('click').bind('click',(function(){
                    chooseListAll[Number(this.dataset.contentid)-1].splice(Number(this.dataset.index),1)
                    $(this).parent().remove()
                }))
            }
        })
        //点击商品搜索
        $(".searchProduct").click(function(){
            $("#hiddenresult").empty()
            let name=$(".productName")[0].value,type
            if($(".productType")[0].value!='选择商品分类'){
                type=''
            }else{
                type=$(".productType")[0].value
            }
            console.log('商品分类：'+name)
            console.log('商品名称/商品货号:'+type)
            let list=[]
            //用随机生成的长度模拟获得到的商品数量
            list.length=Math.ceil(Math.random()*50)

            for(let a=0;a<list.length;a++){
                list[a]={}
                list[a].index=a+1
                list[a].id=(Math.random()*100).toFixed(10)
            }
            productList=list
            console.log(list.length)
            let n=Math.ceil(list.length/4)
            let end=Math.floor(list.length/4)
            for(let a=0;a<n;a++){
                let div=document.createElement("div")
                div.className='item form-group result'
                let div1=document.createElement("div")
                div1.className='table'
                let table=document.createElement("table")
                table.className='table table-striped'
                table.innerHTML='<thead><tr><th>序号</th><th>选择</th><th>货号</th><th>商品分类</th><th style="width: 40%">商品名称</th></tr></thead>'
                let tbody=document.createElement("tbody")
                let nList
                if((a+1)<=end){
                    nList=4
                }else{
                    nList=list.length%4
                }
                for(let b=0;b<nList;b++){
                    let tr=document.createElement("tr")
                    tr.innerHTML='<td>'+list[(4*a+b)].index+'</td><td><input type="checkbox" class="cheeek"></td><td>WL289333</td><td>餐巾纸</td><td>植护竹浆本色抽纸3层100抽6包面纸餐巾卫生纸巾批发家用实惠装</td>'
                    tbody.append(tr)
                }
                table.append(tbody)
                div1.append(table)
                div.append(div1)
                $("#hiddenresult").append(div)
            }
            var initPagination = function() {
                var num_entries = $("#hiddenresult div.result").length;
                // 创建分页
                $("#Pagination").pagination(num_entries, {
                    num_edge_entries: 1, //边缘页数
                    num_display_entries: 4, //主体页数
                    callback: pageselectCallback,
                    items_per_page:1 ,//每页显示1项
                    prev_text:'上一页',
                    next_text:'下一页'
                });
            }();

            function pageselectCallback(page_index, jq){
                var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone(true);
                $("#Searchresult").empty().append(new_content); //装载对应分页的内容
                return false;
            }
            //保存商品选择状态
            $(".cheeek").on('change', function(){
                let list=$(".current"),index
                for(let a=0;a<list.length;a++){
                    if(list[a].innerText!='上一页'&&list[a].innerText!='下一页'){
                        index=Number(list[a].innerText)-1
                        break
                    }
                }
                let inputList
                inputList=$("#hiddenresult div.result:eq("+index+") input[type='checkbox']")
                let index1=$(".cheeek").index(this)
                if(this.checked){
                    inputList[index1].checked=true
                }else{
                    inputList[index1].checked=false
                }
            })
        })
        //选择省
        $("#province").on('change', function(){
            let list=addressList[$("#province")[0].value].list
            $("#city")[0].value=""
            $("#city").empty()
            let option2=document.createElement("option")
            option2.innerText='市'
            option2.selected=true
            option2.disabled=true
            $("#city").append(option2)
            $("#area")[0].value=""
            $("#area").empty()
            let option1=document.createElement("option")
            option1.innerText='区'
            option1.selected=true
            option1.disabled=true
            $("#area").append(option1)
            for(let a=0;a<list.length;a++){
                let option=document.createElement("option")
                option.value=a
                option.innerText=list[a].name
                $("#city").append(option)
            }
        })
        //选择市
        $("#city").on('change', function(){
            let list=addressList[$("#province")[0].value].list[$("#city")[0].value].list
            $("#area")[0].value=""
            $("#area").empty()
            let option1=document.createElement("option")
            option1.innerText='区'
            option1.selected=true
            option1.disabled=true
            $("#area").append(option1)
            for(let a=0;a<list.length;a++){
                let option=document.createElement("option")
                option.value=a
                option.innerText=list[a].name
                $("#area").append(option)
            }
        })
        //定义点击添加商品按钮触发的函数
        $.fn.extend({
            clickPuctor:function(id){
                let list=$("#hiddenresult  input[type='checkbox']")
                for(let a=0;a<list.length;a++){
                    list[a].checked=false
                }
                let list1=$("#Searchresult  input[type='checkbox']")
                for(let a=0;a<list1.length;a++){
                    list1[a].checked=false
                }
                // console.log($("#editor"+id)[0].innerHTML.replace(/<div>/g,"<p>").replace(/<\/div>/g,"</p>"))
                contentId=id
            }
        })
        //点击继续添加内容
        $(".addContent").click(function(){
            let div=document.createElement("div")
            let length=$('.fuwenben')[0].children.length
            div.className='id id'+length
            chooseListAll.push([])
            div.innerHTML='<div id="alerts"></div><div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor'+length+'"><div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a><ul class="dropdown-menu"></ul></div><div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a><ul class="dropdown-menu"><li><a data-edit="fontSize 5"><p style="font-size:17px">Huge</p></a></li><li><a data-edit="fontSize 3"><p style="font-size:14px">Normal</p></a></li><li><a data-edit="fontSize 1"><p style="font-size:11px">Small</p></a></li></ul></div> <div class="btn-group"><a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a><a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a><a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a><a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a></div><div class="btn-group"><a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a><a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a><a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a><a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a></div><div class="btn-group"><a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a><a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a><a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a><a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a></div><div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a><div class="dropdown-menu input-append"><input class="span2" placeholder="URL" type="text" data-edit="createLink"><button class="btn" type="button">Add</button></div><a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a></div><div class="btn-group"><a class="btn" data-edit="fgfg" title="添加商品" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa  addPuctor"></i></a></div><div class="btn-group"><a class="btn" title="Insert picture (or just drag &amp; drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a><input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage"></div><div class="btn-group"><a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a><a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a></div></div><div id="editor'+length+'" class="editor-wrapper placeholderText" contenteditable="true"></div><textarea name="descr" id="descr" style="display:none;"></textarea><br>'
            $(this).before(div)
            setTimeout(()=>{
                console.log('#editor'+length)
                $('#editor'+length).wysiwyg()
                $('.id'+length+" .addPuctor").click(function(){
                    $(this).clickPuctor(length)
                })
            },1)
        })
        //点击继续添加商品图标
        $(".addPuctor").click(function(){
            $(this).clickPuctor(1)
        })
        //点击保存
        $(".submited").click(function(){
            let list10086=JSON.stringify(chooseListAll)
            let list10087=JSON.parse(list10086)
            for(let a=0;a<list10087.length;a++){
                for(let b=0;b<list10087[a].length;b++){
                    list10087[a][b]=list10087[a][b].id
                }
            }
            let contentList=[]
            for(let a=1;a<10000000000;a++){
                if($('#editor'+a)[0]){
                    contentList.push($("#editor"+a)[0].innerHTML.replace(/<div>/g,"<p>").replace(/<\/div>/g,"</p>"))
                }else{
                    break
                }
            }
            let json={};
            json.softTitle=$('.title')[0].value;
            json.softStyle=styleList[$('#style')[0].value].id;
            json.softPlace=placelist[$('#place')[0].value].id;
            json.province=addressList[$('#province')[0].value].name;
            json.city=addressList[$('#province')[0].value].list[$('#city')[0].value].name;
            json.area=addressList[$('#province')[0].value].list[$('#city')[0].value].list[$('#area')[0].value].name;
            json.coverImage=$('.addImg>img')[0].src
            json.list=[];
            for(let a=0;a<contentList.length;a++){
                let mes={};
                //mes.shopId=list10087[a].join(",")
                mes.shopId=contentList.length;
                mes.image="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583842336445&di=afaa0516fc35f17201cf7ec0933afbc3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F07%2F20150407H0341_5rEiy.thumb.1000_0.jpeg"
                mes.imageContent=contentList[a];
                json.list.push(mes)
            }
            let formData = new FormData();
            formData.append('softTitle',$('.title')[0].value);
            formData.append('softStyle',styleList[$('#style')[0].value].id);
            formData.append('softPlace',placelist[$('#place')[0].value].id);
            formData.append('softApartment',placelist[$('#place')[0].value].id);
            formData.append('province',addressList[$('#province')[0].value].name);
            formData.append('city',addressList[$('#province')[0].value].list[$('#city')[0].value].name);
            formData.append('area',addressList[$('#province')[0].value].list[$('#city')[0].value].list[$('#area')[0].value].name);
            formData.append('coverImage',$('.addImg>img')[0].src);
            formData.append('list',JSON.stringify(json.list));
            console.log(JSON.stringify(json.list))
            $.ajax({
                url: 'http://localhost:8086/backstageSoft/insertSoft',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function(res){
                    console.log("seccess")
                }
            });
            console.log(json)
            // console.log(contentList)
            // console.log($('.title')[0].value)
            // console.log(placelist[$('#place')[0].value])
            // console.log(styleList[$('#style')[0].value])
            // console.log(addressList[$('#province')[0].value].name)
            // console.log(addressList[$('#province')[0].value].list[$('#city')[0].value].name)
            // console.log(addressList[$('#province')[0].value].list[$('#city')[0].value].list[$('#area')[0].value].name)
            // console.log($('.addImg>img')[0].src)
        })

    })
</script>
</body>
